<template>
  <div class="chat-container">
    <el-card class="chat-card">
      <template #header>
        <div class="chat-header">
          <span>AI 助手</span>
        </div>
      </template>
      
      <div class="chat-content" ref="chatContent">
        <div v-for="(msg, index) in chatMessages" :key="index" 
             :class="['message', msg.role === 'user' ? 'user-message' : 'ai-message']">
          <div class="message-content">{{ msg.content }}</div>
        </div>
      </div>

      <div class="chat-input">
        <el-input
          v-model="inputMessage"
          type="textarea"
          :rows="3"
          placeholder="请输入您的问题..."
          @keyup.enter.ctrl="sendMessage"
        />
        <el-button type="primary" @click="sendMessage" :loading="loading">
          发送
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const API_KEY = import.meta.env.VITE_DEEPSEEK_API_KEY
const inputMessage = ref('')
const chatMessages = ref([
  {
    role: 'system',
    content: 'You are a helpful assistant.'
  }
])
const loading = ref(false)
const chatContent = ref(null)

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim() || loading.value) return
  
  // 添加用户消息
  const userMessage = {
    role: 'user',
    content: inputMessage.value
  }
  chatMessages.value.push(userMessage)

  loading.value = true
  try {
    // 修改为正确的域名
    const response = await axios.post('https://api.deepseek.com/chat/completions', {
      model: 'deepseek-chat',
      messages: chatMessages.value,
      stream: false
    }, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      }
    })

    // 添加AI回复
    chatMessages.value.push({
      role: 'assistant',
      content: response.data.choices[0].message.content
    })

    // 清空输入
    inputMessage.value = ''

    // 滚动到底部
    await nextTick()
    if (chatContent.value) {
      chatContent.value.scrollTop = chatContent.value.scrollHeight
    }
  } catch (error) {
    console.error('发送消息失败:', error)
    ElMessage.error(error.response?.data?.error?.message || '发送消息失败，请重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.chat-container {
  padding: 20px;
  height: 100%;
}

.chat-card {
  height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
}

.chat-header {
  font-size: 18px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  margin-bottom: 20px;
}

.message {
  margin-bottom: 20px;
  display: flex;
}

.user-message {
  justify-content: flex-end;
}

.message-content {
  max-width: 70%;
  padding: 10px 15px;
  border-radius: 8px;
  word-break: break-word;
  white-space: pre-wrap;
}

.user-message .message-content {
  background-color: #95ec69;
}

.ai-message .message-content {
  background-color: #f4f4f5;
}

.chat-input {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.chat-input .el-textarea {
  flex: 1;
}
</style> 